<template>
  <a-modal
    :title="materialName"
    :width="700"
    :maskClosable="false"
    :visible="visible"
    destroyOnClose
    :footer="null"
    @cancel="handleCancel"
  >
  <!-- <a-spin :spinning="confirmLoading"> -->
    <viewer>
      <img 
        v-for="(item, index) in imgList"
        :key="index"
        style="width:180px;height:150px; margin-left:20px; margin-top:20px; border:1px solid #aaa;"
        :src="item"
        alt=""
      />
    </viewer>
  <!-- </a-spin> -->
    <!-- <span v-for="(item, index) in imgList" :key="index">---------{{`${$store.state.baseUrl}/sysFileInfo/preview?id=${item}`}}--------</span> -->
  </a-modal>
</template>

<script>

export default {
  data() {
    return {
      // confirmLoading: false,
      visible:false,
      materialName:'',  //产品名称字段
      imgList:[],
      text:''
    }
  },
  // watch:{
  //   imgList(newValue, oldValue){
  //     if(newValue.length>0){
  //       this.confirmLoading = false
  //     } else {
  //       setTimeout(()=>{
  //         this.confirmLoading = false
  //       }, 3000)
  //     }
  //   }
  // },
  methods: {
    init(text, materialName) {
      // this.confirmLoading = true
      this.text = text
      this.imgList = []
      this.materialName = materialName
      this.imgList = text.split(',').map(item=>{return `${this.$store.state.baseUrl}/sysFileInfo/preview?id=`+item})
      this.visible = true
    },
    handleCancel(){
      this.visible = false
      // this.confirmLoading = false
      // this.imgList = []
      this.materialName = ''
    }
  }
}
</script>
